
import React from 'react'
import ReactDom from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import { AppContainer } from 'react-hot-loader'
import { Provider } from 'mobx-react'

import RouterMap from './root'
import { createStore, createUserStore } from './store/app_state'
import './css/pc.css';
import './css/mobile.css';

const userInfo = window._USERINFO__ || {};
const initialState = window._INITIAL_STATE_ || {}
const userStore = createUserStore(userInfo);
const appState = createStore(initialState)
const render = (Component) => {
  ReactDom.hydrate(
    <AppContainer>
      <Provider {...appState} userStore={userStore}>
        <BrowserRouter>
          <Component />
        </BrowserRouter>
      </Provider>
    </AppContainer>,
    document.getElementById('app'),
  )
}
render(RouterMap);
if (module.hot) {
  module.hot.accept('./root.jsx', () => {
    const NextApp = require('./root').default;
    render(NextApp)
  })
}
